<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>**6.5 文章列表展现综合练习**</title>
    <!--引用css/bootstrap.min.css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <script src="{% static 'js/vue.global.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}">
    </script>
</head>
<body>
{% verbatim %} <!-- 添加此行 -->
<div class="container" id="app">

  <!-- 标题 title,内容 content,作者 author,价格 price,发布日期 pub_date,状态 status,操作 ---->
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">标题</th>
        <th scope="col">内容</th>
        <th scope="col">作者</th>
        <th scope="col">价格</th>
        <th scope="col">发布日期</th>
        <th scope="col">状态</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- 标题 title,内容 content,作者 author,价格 price,发布日期 pub_date,状态 status,操作 ---->
      <!-- 使用vue渲染界面-->
      <tr v-for="article in articles" :key="article.id">
        <th scope="row">{{ article.id }}</th>
        <td>{{ article.title }}</td>
        <td>{{ article.content }}</td>
        <td>{{ article.author }}</td>
        <td>{{ article.price }}</td>
        <td>{{ article.pub_date }}</td>
        <td>
          <span v-if="article.status == 1" class="badge bg-primary">已发布</span>
          <span v-else-if="article.status == 0" class="badge bg-danger">草稿</span>
        </td>
        <td>
          <a href="#" class="btn btn-primary">编辑</a>
        </td>
      </tr>

    </tbody>
  </table>
    {% endverbatim %} <!-- 添加此行 -->
</div>
<script>
  //导入相关的vue模块
  const {createApp,ref,reactive,onMounted}=Vue
  console.log("=====createApp",createApp);
  const app = Vue.createApp({
    setup() {
      // 定义响应式数据
      const articles = reactive([]);
      console.log(" === setup===",articles);
      // 定义后台请求http,axios组件
      const getArticles = () => {
        axios({
          method: 'get',
          url:'/blog/api/article/list/',
          headers: {
            'Content-Type': 'application/json',
             'X-Requested-With': 'XMLHttpRequest'
            }
          }).then(response => {
            // 处理响应数据
            console.log("===axios===",response.data.data);
            articles.splice(0,articles.length,...response.data.data);
          })

      };

      // 页面加载时执行后台请求
      onMounted(() => {
        // 调用getArticles方法
        console.log("===onMounted=====");
        getArticles();
      });
      return {
        articles,
        getArticles
      };
    }
  });
  // 挂载应用
  app.mount('#app');
</script>
</body>
</html>